<v-container fluid grid-list-md text-xs-center :style="{width:size * 8 + 'px', height:height + 'px'}" style="padding:0%;touch-action: none;">
  <v-layout row wrap>
    <v-flex xs12>
      <v-text-field
        style="text-transform:none;padding-left: 2%;padding-right: 2%;"
        dense
        class="title"
        single-line
        hide-details
        outlined
        :disabled="recording"
        :append-icon="scene == ''?'':'clear'"
        @click:append="scene = ''"
        v-model="scene"
        label="scene"
      >
      </v-text-field>
    </v-flex>
    <v-flex xs12>
      <v-text-field
        style="text-transform:none;padding-left: 2%;padding-right: 2%;"
        dense
        class="title"
        single-line
        hide-details
        outlined
        :disabled="recording"
        :append-icon="action == ''?'':'clear'"
        @click:append="action = ''"
        v-model="action"
        label="action"
      >
      </v-text-field>
    </v-flex>
    <v-flex xs12 style="padding-left: 5%; padding-right: 5%">
      <v-slider style="margin: 0%" readonly hide-details :thumb-label="progress!=0?'always':false" ticks="always" v-model="progress" :max="actions.length">
        <template v-slot:thumb-label>{{progress==0?'#':actions[progress - 1].value}}</template>
      </v-slider>
    </v-flex>
    <v-flex xs12 style="display: flex;">
      <v-flex style="margin: 0%; padding: 0%;">
        <v-btn block text large :disabled="recording" @click="colord=true" :color="colors[color]">
          <v-icon large>colorize</v-icon>
        </v-btn>
      </v-flex>
      <v-flex style="margin: 0%; padding: 0%;">
        <v-btn block text large :disabled="recording" @click="tap('mirror')" :color="context.cuber.preferance.mirror?'red':''">
          <v-icon large>flip</v-icon>
        </v-btn>
      </v-flex>
      <v-flex style="margin: 0%; padding: 0%;">
        <v-btn block text large :disabled="recording" @click="tap('hollow')" :color="context.cuber.preferance.hollow?'red':''">
          <v-icon large>visibility</v-icon>
        </v-btn>
      </v-flex>
      <v-flex style="margin: 0%; padding: 0%;">
        <v-btn block text large :disabled="recording" @click="quality=true">
          <v-icon large>crop</v-icon>
        </v-btn>
      </v-flex>
      <v-flex style="margin: 0%; padding: 0%;">
        <v-btn block text large @click="tap('film')">
          <v-icon large>{{actions.length==0?'camera_alt':(recording?'stop':'videocam')}}</v-icon>
        </v-btn>
      </v-flex>
    </v-flex>
    <v-flex xs12 style="display: flex;margin: 0%; padding: 0%;">
      <v-flex style="margin: 0%; padding: 0%;">
        <v-btn block text large :disabled="(progress==0 && context.cuber.cube.history.length == 0) || recording" @click="init">
          <v-icon large>skip_previous</v-icon>
        </v-btn>
      </v-flex>
      <v-flex style="margin: 0%; padding: 0%;">
        <v-btn block text large :disabled="progress==0 || recording" @click="backward">
          <v-icon large>fast_rewind</v-icon>
        </v-btn>
      </v-flex>
      <v-flex style="margin: 0%; padding: 0%;">
        <v-btn block text large :disabled="progress == actions.length || recording" @click="toggle">
          <v-icon large>{{playing?'pause':'play_arrow'}}</v-icon>
        </v-btn>
      </v-flex>
      <v-flex style="margin: 0%; padding: 0%;">
        <v-btn block text large :disabled="progress==actions.length || recording" @click="forward">
          <v-icon large>fast_forward</v-icon>
        </v-btn>
      </v-flex>
      <v-flex style="margin: 0%; padding: 0%;">
        <v-btn block text large :disabled="(progress==actions.length) || recording" @click="end">
          <v-icon large>skip_next</v-icon>
        </v-btn>
      </v-flex>
    </v-flex>
  </v-layout>
  <v-bottom-sheet v-model="quality">
    <v-card flat style="margin: auto;touch-action: none;user-select: none;">
      <v-container fluid grid-list-md text-xs-center :style="{width:size * 8 + 'px'}">
        <v-layout row wrap justify-center align-center>
          <v-slider v-model="pixel" always-dirty thumb-label="always" max="1024" min="128" step="128" label="像素"></v-slider>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-slider v-model="duration" always-dirty thumb-label="always" max="60" min="10" step="10" label="帧数"></v-slider>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-slider v-model="delay" always-dirty thumb-label="always" max="10" min="2" step="1" label="帧率">
            <template v-slot:thumb-label>{{Math.round(100/delay)}}</template>
          </v-slider>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-flex xs6>
            <v-btn block @click="quality=false;" outlined color="primary">
              确定
            </v-btn>
          </v-flex>
          <v-flex xs6>
            <v-btn block @click="pixel=512;duration=30;delay=2;" outlined color="error">
              重置
            </v-btn>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </v-bottom-sheet>
  <v-bottom-sheet v-model="colord">
    <v-card flat style="margin: auto;touch-action: none;user-select: none;">
      <v-container fluid grid-list-md text-xs-center :style="{width:size * 8 + 'px'}">
        <v-layout row wrap>
          <v-flex v-for="(item, index) in colors" :key="index" xs2>
            <v-btn
              @click="colord = false; color = index;"
              :color="item"
              block
              depressed
              class="headline"
              style="height:2em; min-width: 0%; min-height: 0%; margin: 0%;"
            >
            </v-btn>
          </v-flex>
          <v-flex xs2>
            <v-btn @click="clear" block text class="headline" style="height: 2em; min-width: 0%; min-height: 0%; margin: 0%; padding: 0%;">
              <v-icon large color="red">replay</v-icon>
            </v-btn>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </v-bottom-sheet>
</v-container>
